import React, { useEffect, useState } from "react";
import { ListState } from "../../hooks/useFetchList";
import axios from "axios";
import { ListItem } from "../../component";

interface TabState {
  id: string;
  title: string;
  children: ListState[];
}

const Index: React.FC = () => {
  const [tabs, setTabs] = useState<TabState[]>([]);
  const [activeIndex, setActiveIndex] = useState(0);
  const fetchTabs = async () => {
    const resp = await axios.get("/api/tabs");
    setTabs(resp.data.data);
  };
  useEffect(() => {
    fetchTabs();
  }, []);
  return (
    <div className="tab">
      <div className="left">
        {tabs.map((v, i) => {
          return (
            <span
              onClick={() => setActiveIndex(i)}
              key={v.id}
              className={i === activeIndex ? "active" : ""}
            >
              {v.title}
            </span>
          );
        })}
      </div>
      <div className="right">
        <div className="list">
          {tabs.length > 0 &&
            tabs[activeIndex].children.map((v) => {
              return <ListItem v={v} key={v.id}></ListItem>;
            })}
        </div>
      </div>
    </div>
  );
};

export default Index;
